<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-select clearable v-model="searchParam.commentReportTypeUuid" placeholder="请选择举报类型">
                    <el-option v-for="commentReportType in data.commentReportTypes" :key="commentReportType.uuid"
                               :label="commentReportType.name"
                               :value="commentReportType.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.commentReports" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column prop="reportUserNickName" label="举报人昵称" align="center" width="150px"/>
            <el-table-column prop="reportedUserNickName" label="被举报人昵称" align="center" width="150px"/>
            <el-table-column prop="commentReportTypeName" label="举报类型" align="center" width="150px"/>
            <el-table-column prop="status" label="状态" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.status === 1" type="primary"
                        disable-transitions
                    >待审核
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 2" type="danger"
                        disable-transitions
                    >存在违规
                    </el-tag>
                    <el-tag
                        v-show="scope.row.status === 3" type="success"
                        disable-transitions
                    >不存在违规
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="reportTime"
                label="举报时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="toExamine(scope.row.uuid)"
                        v-if="scope.row.status === 1"
                        type="primary"
                        size="small"
                    >审核
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="toDetail(scope.row.uuid)"
                        v-if="scope.row.status !== 1"
                        type="info"
                        size="small"
                    >详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {page} from "@/api/commentReport/commentReport";
import {reactive, onMounted} from "vue";
import {list} from "@/api/commentReport/commentReportType";
import {useRouter} from "vue-router";

export default {
    setup() {
        const data = reactive({
            commentReports: [],
            total: 0,
            commentReportTypes: []
        })
        const router = useRouter();
        const searchParam = reactive({
            page: 1,
            size: 10,
            commentReportTypeUuid: ''
        })
        /**
         * 分页查询评论举报
         */
        const pageListCommentReport = () => {
            page(searchParam).then(res => {
                data.commentReports = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 获取全部评论举报类型
         */
        const listCommentReportType = () => {
            list({}).then(res => {
                data.commentReportTypes = res.data
            })
        }
        /**
         * 搜索
         */
        const search = () => {
            pageListCommentReport()
        }
        /**
         * 跳转到审核页面
         * @param uuid
         */
        const toExamine = (uuid) => {
            router.push({path: '/commentReport/examine', query: {uuid: uuid}})
        }
        /**
         * 跳转到详情页面
         */
        const toDetail = (uuid) => {
            router.push({path: '/commentReport/detail', query: {uuid: uuid}})
        }
        onMounted(() => {
            pageListCommentReport()
            listCommentReportType()
        })
        return {
            data,
            searchParam,
            search,
            toExamine,
            toDetail
        }
    }
}
</script>